<template>
  <basic-container>
    <div>
      <span style="font-weight:bold; font-size:14px;">当前年份：</span>
      <el-select size='small' v-model="yearsValue" placeholder="请选择年份" @change='selectYears'>
        <el-option
          v-for="item in yearOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
    </div>
    <div class='calender-item' v-for="(monthItem,index) in calendarData.monthData" :key="index">
      <div style="text-align:center; padding:20px 0 10px;font-weight:bold;font-size:14px;">
        {{calendarData.years}}年{{index+1}}月
      </div>
      <el-calendar v-model="monthItem.monthFull" id="calendar">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <!--自定义内容-->
            <div style="height:40px; position: relative;" @click="showDialog(data.day)">
              <div class="calendar-day" >{{ data.day.split('-').slice(2).join('-') }}</div>
              <div v-for="item in monthItem.markData"  :key="item">
                <div v-if="item.selfDate == data.day">
                  <div :class='item.isWorkDay == "班"? "work_style":"not_work_style"'>({{item.isWorkDay}})</div>
                  <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                    <div class="is-selected">{{item.things}}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </template>
      </el-calendar>
    </div>
     <!-- 
      维护假期弹框
     -->
    <el-dialog title="日历维护" width='50%' :close-on-click-modal='false' :append-to-body='true' :destroy-on-close='true' :visible.sync="calenderSettingDialog">
      <div style="padding:10px;">
        <span style="color:red;">*</span><span style="font-weight:bold;">当 前 日 期：</span>{{currentDayRow.holidayDate}}
      </div>
      <div style="padding:10px;">
        <el-row>
          <el-col span="3">
            <span style="color:red;">*</span>
            <span style="font-weight:bold;">节假日类型：</span>
          </el-col>
          <el-col span="21">
            <el-radio-group v-model="currentDayRow.holidayName">
            <el-radio v-for="dateType in holidayType" :key="dateType.label" :label="dateType.label">{{dateType.value}}</el-radio>
          </el-radio-group>
          </el-col>
        </el-row> 
      </div>
      <div style="padding:10px;">
        <el-row>
          <el-col span="3">
            <span style="font-weight:bold;">备注：</span>
          </el-col>
          <el-col span="21">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="currentDayRow.holidayRemark">
            </el-input>
          </el-col>
        </el-row> 
        
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" id="copyBtn" @click="saveOrUpdate" data-clipboard-target="#pathText">保存</el-button>
        <el-button size="small" @click="calenderSettingDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import {queryYearsCalender,saveOrUpdateSysCalender,saveOrUpdateSysCalenderList,saveSysCalender,saveSysCalenderList,deleteSysCalender,querySysCalender,querySysCalenderListPage,updateSysCalender,deleteSysCalenderList} from '@/api/system/sysCalenderApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {filterFormat} from '@/util/util';
export default {
  data() {
    return {    
      //当前选择日期记录
      currentDayRow: {
        holidayDate : '',
        holidayName: '',
        holidayRemark: '',
      },
      holidayType: [],
      calenderSettingDialog: false,
      calendarData: {},
      qqq:{
        years: '2021',
        monthData: [
          {
            month: '1',
            monthFull: '2021-01-01',
            markData: [
              { selfDate: '2021-01-08',things: '元旦节' },
              { selfDate: '2021-01-09',things: '清明节' }
            ]
          },
          {
            month: '2',
            monthFull: '2021-02-01',
            markData: [
              { selfDate: '2021-02-08',things: '呵呵节' },
              { selfDate: '2021-02-09',things: '儿童节' }
            ]
          },
          {
            month: '2',
            monthFull: '2021-02-01',
            markData: [
              { selfDate: '2021-02-08',things: '呵呵节' },
              { selfDate: '2021-02-09',things: '儿童节' }
            ]
          },
          {
            month: '2',
            monthFull: '2021-02-01',
            markData: [
              { selfDate: '2021-02-08',things: '呵呵节' },
              { selfDate: '2021-02-09',things: '儿童节' }
            ]
          },
          {
            month: '2',
            monthFull: '2021-02-01',
            markData: [
              { selfDate: '2021-02-08',things: '呵呵节' },
              { selfDate: '2021-02-09',things: '儿童节' }
            ]
          }
        ]
      },

      yearsValue: this.$toolUtil.getYear(new Date()),
      yearOptions: [],

      data: [],
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','orgTree','genOrgTree','userInfo','permission','projectInfo']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.sys_calender_add, false),
        viewBtn: this.vaildData(this.permission.sys_calender_view, false),
        delBtn: this.vaildData(this.permission.sys_calender_delete, false),
        editBtn: this.vaildData(this.permission.sys_calender_edit, false),
        printBtn: this.vaildData(this.permission.sys_calender_print, false),
        searchBtn:this.vaildData(this.permission.sys_calender_search, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push({id : ele.id});
      });
      return ids;
    } 
  },
  methods: { 
    /**
     * 切换年份显示
     */
    selectYears(val){
      this.yearsValue = val;
      this.onLoad();
    },
    /**
     * 查询当前记录是否存在，存在则修改，否则新增！
     */
    onLoad() {
      this.reqParams =  {
        singleBody: {
          holidayDate: this.yearsValue
        }
      }
      this.commonData = reqCommonMsg(this.reqParams)
      queryYearsCalender(this.commonData).then(res => {
        const data = res.data.body.listBody;
        console.log('data[0]==',data[0]);
        this.calendarData = data[0]; 
      }, error => {
        this.loading = false; 
      });
    },
    /**
     * 打开日历维护对话框
     */
    showDialog(date){
      if(this.permission.sys_calender_edit){
        //alert('date=='+date);
        this.calenderSettingDialog = true;
        this.currentDayRow.holidayDate = date;
        this.querySysCalender();
      }
    },
    /**
     * 查询当前记录是否存在，存在则修改，否则新增！
     */
    querySysCalender() {
      this.currentDayRow.id = '0';
      this.currentDayRow.holidayName = '';
      this.currentDayRow.holidayRemark = '';
      this.loading = true;
      this.reqParams =  {
        singleBody: {
          holidayDate: this.currentDayRow.holidayDate
        }
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysCalenderListPage(this.commonData).then(res => {
        const data = res.data.body.listBody;
        if(data.length > 0){
          this.currentDayRow = data[0];
        } 
      }, error => {
        this.loading = false; 
      });
    },
    /**
     * 修改一条记录
     */
    saveOrUpdate() { 
      if(!this.currentDayRow.holidayName){
        this.$message({
          type: 'error',
          message: '请选择节假日类型!'
        });
        return false
      }
      this.calenderSettingDialog = false;
      this.currentDayRow.year = this.$toolUtil.getYear(new Date(this.currentDayRow.holidayDate))
      this.reqParams.singleBody = this.currentDayRow;
      this.commonData = reqCommonMsg(this.reqParams)
      saveOrUpdateSysCalender(this.commonData).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.currentDayRow.holidayDate = '';
        this.currentDayRow.holidayName = '';
        this.currentDayRow.holidayRemark = '';
        this.onLoad();
      }, error => {
        this.$console.log(error);
      });
    },
    
    /**
     * 获取工作日参数
     */
    async getSysDict() {
      let sysParamData = await this.$params.getSysDict(['holidayType','yearOptions']);
      this.holidayType = sysParamData.holidayType;
      this.yearOptions = sysParamData.yearOptions;
    }
  },
  created() {
    //获取初始数据
    this.onLoad();
    //获取系统参数
    setTimeout(() => {
      this.getSysDict();
    }, 100);
  },
  watch: {
    showColumn: {
      handler(newValue, oldValue) {
      },
      deep: true
      //this.$setStore({name: this.userInfo.userId +'sysApiScopeColumn', content: this.showColumn});
    }
  }
};
</script>
<style lang="less">
 .calender-item{
   width:32%; 
   height:435px; 
   float:left;
   text-align: center;
   font-size: 14px;
   border: 1px solid #f3f3f3;
   background-color: #f3f3f3;
   margin: 5px;
 }
.calender-item .el-calendar-day{
   height: 50px !important;
   padding: 8px 0;
 }
 .calender-item .el-calendar__header{
   display: none;
 }
 .calender-item .el-calendar__body{
   padding: 5px 20px 22px !important;
 }
 //禁止点击事件
 .el-calendar-table{
    width: 100%;
    height: 100%;
    &:not(.is-range){
    //使不是本月的日期不可点击，不会跳转到其他月份
    td.next{
      pointer-events: none;
    }
    td.prev{
      pointer-events: none;
    }
    //td{
    //    pointer-events: none;
    //}
    }
  }
  #calendartxt {
    content: '当月';
  }

.is-selected{
  color: #F8A535;
  font-size: 10px;
  margin-top: 0px;
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}
.work_style{
  font-size:10px;
  position: absolute;
  top:0px; right:2px;
  color:#048a40
}
.not_work_style{
  font-size:10px;
  position: absolute;
  top:0px; right:2px;
  color:#F8A535
}
</style>
